<template>
  <view class="container">
    <view class="container-box">
      <view class="box-title box">
        <view>
          <view class="title-icon">
            <view>
              <u-icon name="clock" size="30rpx" color="#32363C" />
            </view>
            <text>申请退款</text>
          </view>
          <view class="title">申请退款</view>
        </view>
        <view>您已提交退款申请，请等待客服处理</view>
      </view>
      <view class="box-sum box">
        <view class="title">
          退款合计
        </view>
        <view class="sum-price">
          <view>￥<text>{{ totalPrice }}</text> </view>
          <text>按实付金额计算，原路退回</text>
        </view>
      </view>
      <view class="box-process box">
        <view class="title">退款流程</view>
        <view class="process-steps">
          <u-steps :current="setpStatus" readonly>
            <u-steps-item v-for="(item, index) in stepList" :key="index" :title="item.title" content="">
            </u-steps-item>
          </u-steps>
        </view>
        <view class="process-timer">{{ refundApplyTime }}</view>
      </view>
      <view class="box-info box">
        <view class="title">退款信息</view>
        <block v-for="(item, index) in goods" :key="index">
          <view class="container-order-list">
            <view class="orderDetail-item">
              <view class="orderDetail-item-img">
                <image :src="item.thumbnail" lazy-load="true" />
              </view>
              <view class="orderDetail-item-text">
                <view>{{ item.name }}</view>
              </view>
              <view class="orderDetail-item-price">
                <view>￥<text>{{ item.realityPrice }}</text></view>
                <text>×{{ item.number }}</text>
              </view>
            </view>
            <view class="order-actual-payment">
              实付款￥<text>{{ item.realityPrice }}</text>
            </view>
          </view>
        </block>
      </view>
      <view class="box-cancel">
        <view @click="onCancelRefund">取消退款</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      stepList: [
        { title: '提交申请' },
        { title: '审核中' },
        { title: '退款成功' },
      ],
      setpStatus: 1,
      goods: [],
      totalPrice: 0,
      refundApplyTime: ''
    }
  },
  onLoad(options) {
    this.orderId = options.orderId
  },
  onShow() {
    this.getOrderDetail();
  },
  methods: {
    async getOrderDetail() {
      let result = await this.$request.miniOrderDetail({ orderId: this.orderId })
      const orderDetail = result.data;
      this.orderId = orderDetail.id
      this.goods = orderDetail.orderProductDTOList
      this.totalPrice = orderDetail.realityPrice
      this.refundApplyTime = orderDetail.refundApplyTime
    },

    //取消退款
    onCancelRefund() {
      this.$request.miniCancelRefund({ orderId: this.orderId }).then(res => {
        if (res.msg == '成功')
          this.$toast('取消退款成功');
        setTimeout(() => {
          this.$goPath(1)
        }, 1000)
      })
    },
  }
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 24rpx 24rpx 0;
  background-color: #f6f6f6;
  position: relative;
}

.container-box {
  background: #FFFFFF;
  box-shadow: 2rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.01);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 24rpx;
}

.box {
  color: #999999;
  padding: 0 10rpx;
  padding-bottom: 24rpx;
  border-bottom: 3rpx solid rgba(241, 241, 241, 0.8);
}

.box-title {
  line-height: 50rpx;
  font-size: 24rpx;
}

.box-title view {
  display: flex;
  align-items: center;
}

.box-title .title-icon {
  height: 43rpx;
  color: #666666;
  font-size: 24rpx;
  margin-right: 12rpx;
  border-radius: 8rpx;
  border: 1rpx solid #DBDFE4;
  padding-right: 12rpx;
}

.box-title .title-icon>view {
  width: 40rpx;
  padding: 4rpx;
  background: #DBDFE4;
}

.title-icon>text {
  margin-left: 5rpx;
}

.title {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
}

.box-sum {
  font-size: 24rpx;
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
}

.sum-price {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.sum-price>view {
  text-align: right;
  font-size: 28rpx;
  color: #EA5F5F;
}

.sum-price>view text {
  font-size: 40rpx;
  font-weight: bold;
}

.box-process {
  margin-top: 24rpx;
}

.process-steps {
  padding: 10rpx 14rpx;
  padding-top: 32rpx;
}

.box-process .process-timer {
  font-size: 20rpx;
  color: #999999;
}

.box-process .process-timer>text {
  margin-right: 10rpx;
}

.t-steps-item__line--finish,
.t-steps-item__line--reverse.t-steps-item__line--process {
  background-color: #32B499 !important;
}

.t-steps-item__circle--finish {
  background-color: #32B499 !important;
  color: #fff !important;
}

.t-steps-item__circle--process {
  background-color: #32B499 !important;
}

.box-info {
  margin-top: 24rpx;
}

.container-order-list {
  margin-top: 24rpx;
  background-color: #fff;
  box-shadow: 2rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.01);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.orderDetail-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
  color: #999999;
  font-size: 25rpx;
}

.orderDetail-item-img {
  width: 128rpx;
  height: 128rpx;
}

.orderDetail-item-img image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx 10rpx;
  display: block;
}

.orderDetail-item-text {
  width: 372rpx;
  display: flex;
  flex-direction: column;
  line-height: 40rpx;
}

.orderDetail-item-text>view:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}

.orderDetail-item-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.orderDetail-item-price>view {
  color: #333;
}

.orderDetail-item-price>view>text {
  font-size: 32rpx;
}

.orderDetail-item-price>text {
  font-size: 24rpx;
}

.order-actual-payment {
  text-align: right;
  font-size: 24rpx;
  color: #333333;
  margin: 24rpx 0;
  margin-bottom: 0;
}

.order-actual-payment text {
  font-size: 40rpx;
  font-weight: bold;
  color: #EA5F5F;
}

.box-cancel {
  margin-top: 24rpx;
  display: flex;
  justify-content: flex-end;
}

.box-cancel view {
  width: 180rpx;
  height: 60rpx;
  background: #32B499;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #fff;
}

.t-steps-item__title--process {
  color: #32B499 !important;
}
</style>